Figmaで作成したデザインをMiroに同期できるFigmiroを使ってみた
画面遷移図の更新にかかる時間はジワジワと増えがち
現在私が担当しているアプリ開発のプロジェクトでは、画面デザインをFigma、画面遷移図をMiroで制作しているため、デザインの調整作業が発生するたびにMiroで遷移図の更新を手作業で行うケースが多く、遷移図の更新にかける時間もジワジワと増えがちになります。FigmaもMiroも便利で素晴らしいツールなので両方使っていきたいのですが、なるべく手作業になるものは減らしていきたいので、FigmaとMiroを同期させることができるFigmiroを使ってみました。
FigmaにFigmiroのプラグインを追加する
まずはFigmaにFigmiroのプラグインを追加します。Figmaにログイン済みのブラウザならこちらのリンクからプラグインをすぐにインストールすることができます。
FigmaからMiroに同期させたいデザインを選択する
Miroに同期させたいデザインを選択し、Main menu → Plugins → Figmiroの順に進みます。今回はひとつのframeで試していますが、複数選択することも可能です。また単体のオブジェクトやgroup単位でもMiroに同期することができます。
MiroでFigmiroが使えるように許可設定をする
初めてFigmiroを使う場合はMiro側で連携が許可されていないため、Log into Miroというボタンが表示されるのでタップしてMiroを開き、Figmaのデザインを同期させたいboardがあるteamを選びます。最後にInstall & authorizeボタンをクリックして許可設定は完了です。
FigmaのデザインをMiroに同期させる
Figmiroの設定ウィンドウからMiroのboardを選び、単体のframeまたは複数frameの場合はOnly selectedを選択、ファイル内のすべてを同期させたい場合はAll on the pageを選択します。
次にデータのフォーマットを選択します。選べるのはPNG JPG SVGの3種類です。
最後にSyncボタンをクリックすると、Miroのboard内にFigmaで制作したデザインが同期されます。
Figmaでデザインの調整が発生した場合、一度Miroに貼付された画像はもう一度プラグインを使ってFigmiroでframeを同期するだけで更新されるので、画面遷移図などの位置調整をやり直さずに済むなど、手作業になりがちな遷移図の作成・更新が楽になります。また、同期するデザインがframeの場合、Miro側に同期された画像のファイル名がFigmaのframe名になります。
